<template>
  <!-- tabs标签 -->
  <div class="tabs">
    <el-tabs
      v-model="activeIndex"
      type="border-card"
      closable
      @tab-click="tabClick"
      v-if="options.length"
      @tab-remove="tabRemove"
      class="tab_Par_con"
    >
      <el-tab-pane
        :key="item.route"
        v-for="(item, index) in options"
        :label="item.name"
        :name="item.route"
      >
    <transition name="fade" mode="out-in">
      <router-view>
      </router-view>
      <div class="home_tit" v-if="$route.path == '/'">
    </div>
    </transition>
    </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // tab切换时，动态的切换路由
    tabClick(tab) {
      console.log("tab==",tab);
      let curRoute = this.$router.currentRoute;
      let path = this.activeIndex;
      if(path!=curRoute.path){
        this.$router.replace({ path: path });
      }

    },
    tabRemove(targetName) {
      // 首页不可删除
      if (targetName == "/") {
        return;
      }
      this.$store.commit("delete_tabs", targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            "set_active_index",
            this.options[this.options.length - 1].route
          );
          this.$router.replace({ path: this.activeIndex });
        } else {
          this.$router.replace({ path: "/" });
        }
      }
    }
  },
  computed: {
    options() {
      return this.$store.state.options;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      }
    }
  },
  watch: {
    $route(to) {
      let flag = false;
      for (let option of this.options) {
        if (option.route === to.path) {
          flag = true;
          this.$store.commit("set_active_index", to.path);
          break;
        }
      }
      if (!flag) {
        this.$store.commit("add_tabs", { route: to.path, name: to.name });
        this.$store.commit("set_active_index", to.path);
      }
    }
  },
};
</script>
<style>
.el-tabs__nav .el-tabs__item:nth-child(1) span{
   display: none;
 }
    .el-tabs__item{
    font-size: 12px !important;
  }
  .el-tabs__nav-wrap{
    margin-bottom: 0;
  }
</style>
<style scoped>
  .tab_Par_con{
    background: none;
    box-shadow: 0 0 0 0;
    border: 0;
  }
    .home_tit{
    padding-top: 20%;
    display: flex;
    justify-content: center;
  }
  .home_tit p {
    font-size: 50px;
  letter-spacing: 16px;
  color: #00bfbf;
  }

</style>
